<script setup>
import {ref,defineProps,onMounted,computed} from 'vue'
import {messageStore} from "@/stores/modules/messageStore.js";

const props = defineProps({
  userInfo: Object,
  jobInfo: Object,
  nowRole: String
})

</script>

<template>
<!--  <div class="chat-header">-->
<!--    <div class="name-box">-->
<!--      <span class="name-text">{{selectedContact.username}}</span>-->
<!--      <span>{{selectedContact.company}}</span>-->
<!--      <i class="vline">|</i>-->
<!--      <span>{{selectedContact.office}}</span>-->
<!--    </div>-->
<!--  </div>-->
  <div class="chat-messages">
    <div class="message">
      <span v-if="nowRole === 'student'">{{ jobInfo?.title }}</span>
      <span v-if="nowRole === 'company'">{{ userInfo?.username }}</span>
      <span v-if="nowRole === 'student'" class="salary-container">{{ jobInfo?.salary }}</span>
      <span v-if="nowRole === 'student'">{{ userInfo?.city }}</span>
      <span v-if="nowRole === 'student'" class="company-name-container">{{userInfo?.companyName}}</span>
      <span v-if="nowRole === 'company'">{{ userInfo?.gender }}</span>
      <span v-if="nowRole === 'company'" class="company-name-container">{{userInfo?.phone}}</span>
    </div>
  </div>
</template>

<style scoped>

.chat-header {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 10px;
  margin-left: 30px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  position: relative;
  padding-bottom: 20px;
}

.company-name-container {
  font-size: 13px !important;
  position: absolute;
  right: 10px;
  color: rgb(38, 131, 168);
}

.message {
  padding: 15px;
  background-color: #f6f6f6;
  border-radius: 5px;
  margin: 0px 10px;
  >span{
    font-size: 16px;
    padding: 10px;
  }
}

.salary-container {
  font-size: 20px;
  font-family: kanzhun-Regular, kanzhun;
  color: #fe574a;
}

.name-box {
  padding: 0 5px;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.name-text {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin-right: 10px;
}

.vline {
  margin: 0 4px;
  font-size: 16px;
  color: rgba(153, 153, 153, 0.57);
}
</style>